<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>使用原生代码进行层叠轮播效果</title>
</head>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}


.box{
    margin-top: 80px;
    margin-left: 16px;
    width: 343px;
    height: 253px;
    background: #FFFFFF;
    border-radius: 12px;
    position: relative;
}

.list{
    width: 323px;
    height: 300px;
    overflow: hidden;
    position: absolute;
    margin-left: 10px;
}

.btn{
    position: absolute;
    top: 70%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    color: white;
    text-decoration: none;
    text-align: center;
    background: rgba(0,255,0,.5);
    cursor: pointer;
}
.next{
    right: 0;
}

li{
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
    opacity: 0;
    transition: all 0.2s linear;
    margin-left: 95px;
}
img{
    width: 134px;
    height: 180px;
    border:none;
    float: left;
}
.p1{
    transform:translate3d(-95px,0,0) scale(0.68);
    transform-origin:0 50%;
    opacity: 1;
    z-index: 2;
}
.p2{
    transform:translate3d(-65px,0,0) scale(0.82);
    transform-origin:0 50%;
    opacity: 1;
    z-index: 3;
}
.p3{
    transform:translate3d(0px,0,0) scale(1);
    z-index: 4;
    opacity: 1;
}
.p4{
    transform:translate3d(90px,0,0) scale(0.82);
    transform-origin:0 50%;
    opacity: 1;
    z-index: 3;
}
.p5{
    transform:translate3d(136px,0,0) scale(0.68);
    transform-origin:0 50%;
    opacity: 1;
    z-index: 2;
}

.buttons{
    position: absolute;
    width: 1200px;
    height: 30px;
    bottom: 0;
    left: 50%;
    margin-left: -600px;
    text-align: center;
    padding-top: 10px;
}
.buttons a{
    display: inline-block;
    width: 35px;
    height: 5px;
    padding-top: 4px;
    cursor: pointer;
}
span{
    display: block;
    width: 35px;
    height: 1px;
    background: red;
}
.blue{
    background: blue;
}
</style>

</head>
<body style="background:gray;">
    <div class="box">
        <div class="list">
            <ul>
                <li class="p5"><a href="#"><img src="http://fpoimg.com/134x180" alt="" /></a></li>
                <li class="p4"><a href="#"><img src="http://fpoimg.com/134x180" alt="" /></a></li>
                <li class="p3"><a href="#"><img src="http://fpoimg.com/134x180" alt="" /></a></li>
                <li class="p2"><a href="#"><img src="http://fpoimg.com/134x180" alt="" /></a></li>
                <li class="p1"><a href="#"><img src="http://fpoimg.com/134x180" alt="" /></a></li>
            </ul>
        </div>
        
        <a href="javascript:;" class="prev btn"><</a>
        <a href="javascript:;" class="next btn">></a>

        <div class="buttons">
            <a href="javascript:;"><span class="blue"></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
            <a href="javascript:;"><span></span></a>
        </div>
    </div>

    <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
    <script type="text/javascript">
    var $a=$(".buttons a");
    var $s=$(".buttons span");
    var cArr=["p5","p4","p3","p2","p1"];
    var index=0;
    $(".next").click(
        function(){
        nextimg();
        }
    )
    $(".prev").click(
        function(){
        previmg();
        }
    )
    //上一张
    function previmg(){
        cArr.unshift(cArr[4]);
        cArr.pop();
        //i是元素的索引，从0开始
        //e为当前处理的元素
        //each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
        $("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
        })
        index--;
        if (index<0) {
            index=4;
        }
        show();
    }

    //下一张
    function nextimg(){
        cArr.push(cArr[0]);
        cArr.shift();
        $("li").each(function(i,e){
            $(e).removeClass().addClass(cArr[i]);
        })
        index++;
        if (index>4) {
            index=0;
        }
        show();
    }

    //通过底下按钮点击切换
    $a.each(function(){
        $(this).click(function(){
            var myindex=$(this).index();
            var b=myindex-index;
            if(b==0){
                return;
            }
            else if(b>0) {
                /*
                 * splice(0,b)的意思是从索引0开始,取出数量为b的数组
                 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
                 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
                 * 这时候原本的数组也将这部分数组进行移除了
                 * 再把移除的数组添加的原本的数组的后面
                 */
                var newarr=cArr.splice(0,b);
                cArr=$.merge(cArr,newarr);
                $("li").each(function(i,e){
                $(e).removeClass().addClass(cArr[i]);
                })
                index=myindex;
                show();
            }
            else if(b<0){
                /*
                 * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
                 * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
                 * 也就是从原本的照片到需要点击的照片的数组
                 * 然后将原本的数组跟取出的数组进行拼接
                 * 再次倒序,使原本的倒序变为正序
                 */
                cArr.reverse();
                var oldarr=cArr.splice(0,-b)
                cArr=$.merge(cArr,oldarr);
                cArr.reverse();
                $("li").each(function(i,e){
                $(e).removeClass().addClass(cArr[i]);
                })
                index=myindex;
                show();
            }
        })
    })

    //改变底下按钮的背景色
    function show(){
        $($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
    }

    //点击class为p1的元素触发上一张照片的函数
    $(document).on("click",".p1",function(){
        previmg();
        setTimeout(function(){
            previmg();
        }, 1000);
        
        return false;//返回一个false值，让a标签不跳转
    });

    //点击class为p2的元素触发上一张照片的函数
    $(document).on("click",".p2",function(){
        previmg();
        return false;//返回一个false值，让a标签不跳转
    });

    //点击class为p4的元素触发下一张照片的函数
    $(document).on("click",".p4",function(){
        nextimg();
        return false;
    });

        //点击class为p5的元素触发下一张照片的函数
    $(document).on("click",".p5",function(){
        nextimg();
        setTimeout(function(){
            nextimg();
        }, 1000);
        return false;
    });

    //            鼠标移入box时清除定时器
    // $(".box").mouseover(function(){
    //     clearInterval(timer);
    // })

    //            鼠标移出box时开始定时器
    // $(".box").mouseleave(function(){
    //     timer=setInterval(nextimg,4000);
    // })

    //            进入页面自动开始定时器
    // timer=setInterval(nextimg,4000);


$(".list").on("touchstart", function (e) {
   e.preventDefault();
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$(".list").on("touchend", function (e) {
    e.preventDefault();
    moveEndX = e.originalEvent.changedTouches[0].pageX,
        moveEndY = e.originalEvent.changedTouches[0].pageY,
        X = moveEndX - startX,
        Y = moveEndY - startY;

    if (Math.abs(X) > Math.abs(Y) && X > 0) {
        nextimg();
    }
    else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        previmg();
    }
    else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        // alert("向下滑动");
    }
    else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        // alert("向上滑动");
    }
    else {
        // alert("just touch");
    }
});

    </script>

    <div style="text-align:center;clear:both">
</div>

</body>
</html>